<template>
  <div class="btns">
    <button v-has-show="'shop:add'">创建</button>
    <button v-has-show="'shop:del'">删除</button>
    <button v-has-show="'shop:edit'">编辑</button>
  </div>
</template>

<script setup lang="ts">
import type { Directive } from "vue";

localStorage.setItem("userId", "wyn-zs");
const permission = ["wyn-zs:shop:add", "wyn-zs:shop:edit"];
const userId = localStorage.getItem("userId") as string;

// 自定义指令-函数模式
const vHasShow: Directive<HTMLElement, string> = (el, binding) => {
  if (!permission.includes(`${userId}:${binding.value}`)) {
    el.remove();
  }
};
</script>

<style scoped>
.btns {
  button {
    margin: 10px;
  }
}
</style>
